<template>
	<view class="shop" :style="{height: pageH}">
		<!-- 顶部导航栏 -->
		<NavBar :title="shopInfo.name" color="#fff" bgc="linear-gradient( 314deg, #FF8508 0%, #FF4847 100%)" />
		<!-- 商户背景图 -->
		<view class="shop-bg">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in shopInfo.head_imgs" :key="item" :style="{backgroundImage:'url('+item.url+')'}">
				</swiper-item>
			</swiper>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="shop-info">
				<view class="shop-details">
					<image src="/static/icon/ti01.png" class="s-img"/>
					<view class="shop-status-name">
						<view class="status-name">
							<Tag text="营业中" color="#FFF" bgc="#4CD995" />
							<view class="shop-name"> {{ shopInfo.name }} </view>
						</view>
						<view class="pf-num">
							<view class="p-item">
								<view class="label"> 评分 </view>
								<view class="value"> {{shopInfo.comment_score}}分 </view>
							</view>	
							<view class="p-item">
								<view class="label"> 销量 </view>
								<view class="value num"> {{shopInfo.goods_sales}} </view>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-desc"> 店铺简介：{{shopInfo.describe_text}} </view>
			</view>
			<view class="switch-bar">
				<view @tap="switchTab(0)" class="switch-item" :class="shopType ==0?'a-item':''"> 店铺产品 </view>
				<view @tap="switchTab(1)" class="switch-item" :class="shopType ==1?'a-item':''"> 商家信息 </view>
				<!-- <view @tap="switchTab(2)" class="switch-item" :class="shopType ==2?'a-item':''"> 用户评价 </view> -->
			</view>
			<Empty text="该商户店铺已关闭" img="empty1" v-if="shopInfo.active!=1"/>
			<view class="shop-goods sleep" v-if="shopType==0&&shopInfo.active==1">
				<scroll-view class="goods-type" :style="{height:svH}" scroll-y :show-scrollbar="false">
					<view 
						class="type-item" 
						:class="categoryId==item.id?'a-type-item':''" 
						v-for="item in categoryList"
						:key="item"
						@tap="pickType"
					> {{item.title}} </view>
				</scroll-view>
				<scroll-view class="goods-list" :style="{height:svH}" scroll-y :show-scrollbar="false" v-if="goodsList.length">
					<GoodsItem :isBtn="false" :goodsInfo="item" v-for="item in goodsList" :key="item"/>
				</scroll-view>
				<Empty txt="该商户还未上传商品~" v-else @tap="pickType"/>
			</view>
			<view class="shop-jb-info" v-if="shopType == 1&&shopInfo.active==1">
			  <view class="item">
			    <view class="label"> 营业时间 </view>
			    <view class="value"> {{shopInfo.open_time}}至{{shopInfo.over_time}}</view>
			  </view>
			  <view class="item">
			    <view class="label"> 联系电话 </view>
			    <view class="value"> {{shopInfo.help_mobile}}</view>
			  </view>
			  <view class="item">
			    <view class="label"> 商家地址 </view>
			    <view class="value"> 
			      <view class="text"> {{shopInfo.detail_address}} </view>
			      <image src="/static/icon/shop/nav.png" class="v-img"/>
			    </view>
			  </view>
			  <view class="item">
			    <view class="label"> 商家简介 </view>
			    <view class="value"> {{shopInfo.intro}} </view>
			  </view>
			</view>
			<view v-if="shopType == 2&&shopInfo.active==1">
				<Evaluate :isTab="false" :isTitle="false"/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import Tag from '@/components/Tag.vue'
	import Empty from '@/components/Empty.vue';
	import NavBar from '@/components/NavBar.vue';
	import Evaluate from '@/components/Evaluate.vue';
	import GoodsItem from '@/components/GoodsCard.vue'
	import { GetShopDetailsApi } from '@/service/agent.js'
	import { GetShopCategoryApi, GetShopGoodsListApi } from '@/service/index.js'
	import { useAddressStore } from '@/store/index.js'
	import { previewImg } from '@/utils/index.js'
	const { safeArea } = uni.getSystemInfoSync()
	const pageH = computed(() => safeArea.height - 60 + 'px' )
	const svH = computed(() => safeArea.height - 300 + 'px' )
	const shopId = ref()
	const shopType = ref(0)
	const goBack = () => {
		uni.navigateBack()
	}
	const switchTab = (index) => {
		shopType.value = index
	}
	const shopName = ref('popo')
	const shopInfo = ref({
		open_time: '', // 营业时间
		over_time: '', // 结束时间
		open_status: '',// 营业状态==1营业中 ==2 休息中
		is_collect: 0, // ==1 已收藏 ==0未收藏
		comment_score: '', // 评分
		name: '', // 
		contacts: '',// 联系人名字
		mobile: '', 
		help_mobile: '', // 客服电话 (展示给客户的)
		describe_text: '', // 店铺描述
		intro: '', // 店铺简介 (展示给客户的)
		detail_address: '',
		logo: '',
		head_imgs: [], // 商家门店照片 (展示给客户的)
		type: '', // 	1 个人 2公司
		comment_num: '', //评价数量
		goods_sales: '', // 销量
		distance: '', // 距离 米
		head_imgs: [], // 商家门店照片 (展示给客户的)
	})
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref()
	const categoryList = ref([])
	const categoryId = ref()
	const goodsList = ref([])
	const pickType = (id) => {
		console.log(id);
		console.log('ppppppppp');
	}
	// 获取商家信息
	const getShopInfo = (shop_id) => {
		const { lonlat } = useAddressStore()
		let params = {
			is_company: 1,
			shop_id:shopId.value,
			latitude: lonlat.latitude,
			longitude: lonlat.longitude
		}
		GetShopDetailsApi(params).then(res => {
			shopInfo.value = res
			getShopCategory()
		})
	}
	// 获取商家分类
	const getShopCategory = () => {
		let params = {
			goods_type: 1,
			shop_id: shopId.value
		}
		GetShopCategoryApi(params).then(res => {
			categoryList.value = res.data
			categoryId.value = res.data[0]?.id
			getGoodsList()
		})
	}
	// 获取商品列表
	const getGoodsList = () => {
		let params = {
			page: page.value,
			page: pageSize.value,
			filters: {
				goods_type: 1,
				shop_id: shopId.value,
				category_id: categoryId.value,
				active: 1,
				status: 'checked',
				search: ''
			}
		}
		GetShopGoodsListApi(params).then(res => {
			goodsList.value.push(...res.data)
			total.value = res.total
		})
	}
	onLoad((e) => {
		const { id } = e
		shopId.value = id 
		getShopInfo()
	})
</script>

<style scoped lang="scss">
	.shop {
		.shop-bg {
			height: 140px;
			.swiper-item, .img {
				width: 750rpx;
				height: 140px;
				background-position: center center;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
		.content {
			transform: translateY(-60px);
			.shop-info {
				padding: 10px;
				margin: 0 12px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				.shop-details {
					display: flex;
					align-items: center;
					margin-bottom: 11px;
					.s-img {
						width: 60px;
						height: 60px;
						margin-right: 10px;
					}
					.shop-status-name {
						flex: 1;
						.status-name {
							display: flex;
							align-items: center;
							margin-bottom: 11px;
							.shop-name {
								color: #333333;
								font-size: 16px;
								font-weight: 500;
								margin-left: 4px;
								line-height: 19px;
							}
						}
						.pf-num {
							display: flex;
							.p-item {
								display: flex;
								flex-direction: column;
								margin-right: 11px;
								&:nth-last-of-type(1) {
									margin-left: 11px;
									position: relative;
									&::before {
										position: absolute;
										display: block;
										content: '';
										height: 14px;
										width: 1px;
										left: -11px;
										top: 50%;
										transform: translateY(-50%);
										background-color: #e6e6e6;
									}
								}
								.label {
									color: #999999;
									font-size: 12px;
									font-weight: 400;
									line-height: 14px;
									margin-bottom: 4px;
								}
								.value {
									color: #FF3B1E;
									font-size: 12px;
									font-weight: 400;
									line-height: 14px;
									&.num {
										color: #333333;
									}
								}
							}
						}
					}
				}
				.shop-desc {
					font-weight: 400;
					font-size: 12px;
					color: #999999;
					line-height: 16px;
				}
			}
			.switch-bar {
				height: 40px;
				display: flex;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 10px 10px 0 0;
				border-bottom: 1px solid #EEEEEE;
				.switch-item {
					flex: 1;
					color: #555555;
					font-size: 14px;
					font-weight: 400;
					line-height: 40px;
					text-align: center;
					&.a-item {
						color: #FF3B1E;
						font-size: 16px;
						font-weight: 500;
						position: relative;
						&::before {
							display: block;
							content: '';
							width: 26px;
							height: 4px;
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							border-radius: 33px;
							background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
						}
					}
				}
			}
			.shop-goods {
				width: 100%;
				display: flex;
				position: relative;
				&.sleep::before {
					display: block;
					content: '';
					width: 100%;
					height: 100%;
					background-color: #fff;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					opacity: .4;
					z-index: 99;
				}
				.goods-type {
					width: 86px;
					.type-item {
						width: 86px;
						height: 46px;
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						line-height: 46px;
						text-align: center;
						&.a-type-item {
							color: #333333;
							font-weight: 500;
							background-color: #fff;
						}
					}
				}
				.goods-list {
					flex: 1;
					background-color: #fff;
				}
			}
			.shop-jb-info {
			  width: 100%;
			  padding: 10px 23px;
			  box-sizing: border-box;
			  background-color: #ffffff;
			  .item {
			    &:nth-of-type(1) {
			      .label {
			        margin-top: 0;
			      }
			    }
			    .label {
			      margin: 14px 0 6px;
			      font-weight: 400;
			      font-size: 14px;
			      color: #333333;
			      line-height: 20px;
			    }
			    .value {
			      color: #999999;
			      font-size: 14px;
			      font-weight: 400;
			      line-height: 20px;
						display: flex;
						align-items: center;
			      .v-img {
			        width: 12px;
			        height: 16px;
			        margin-left: 8px;
			      }
			    }
			  }
			}
		}
	}
</style>
